<template>
  <div class="register-container">
    <div class="container">
      <div class="register">
        <h1 style="text-align: center;">注册</h1>
        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
          <el-form-item label="用户名">
            <el-input v-model="formLabelAlign.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formLabelAlign.password"></el-input>
          </el-form-item>
          <el-form-item label="再次输入密码">
            <el-input v-model="formLabelAlign.checkPassword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="rigister-btn" type="success" @click="handleRegister">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {submitRegister} from '@/api/register/index.js'
export default {
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        username: '',
        password: '',
        checkPassword: ''
      }
    };
  },
  methods: {
    handleRegister() {
      // console.log(this.formLabelAlign)
      if(this.formLabelAlign.username == '' || this.formLabelAlign.password == '' || this.formLabelAlign.checkPassword == '') {
        this.$message.error('输入为空');
        return null
      }
      if(this.formLabelAlign.password != this.formLabelAlign.checkPassword) {
        this.$message.error('两次输入的密码不同');
        this.formLabelAlign.checkPassword = ''
        return null
      }
      if(this.formLabelAlign.password.length < 6) {
        this.$message.error('密码长度需大于或等于6位');
        return null
      }
      submitRegister(this.formLabelAlign).then( (res) => {
        if(res.data.data == '用户名已被注册') {
          this.$message.error('用户名已被注册');
        }else{
          this.$message.success('注册成功,2秒后自动前往登录页');
          setTimeout(()=>{
            this.$router.push('/login')
          },2000)
        }
        
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 600px;
}
.register {
  width: 400px;
  margin: 200px auto;
}
.rigister-btn {
  margin-left: 115px; 
}
</style>